<template>
  <div class="community-notice-container">
    <!-- 顶部标题和搜索栏 -->
    <div class="notice-header">
      <h1 class="notice-title">社区通知公告</h1>
      <div class="search-bar">
        <el-input
          v-model="searchText"
          placeholder="搜索公告标题或内容"
          clearable
          @clear="handleSearchClear"
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
      </div>
    </div>

    <!-- 公告分类筛选 -->
    <div class="notice-filter">
      <el-radio-group v-model="activeCategory" @change="handleCategoryChange">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="notice">通知公告</el-radio-button>
        <el-radio-button label="activity">社区活动</el-radio-button>
        <el-radio-button label="policy">政策法规</el-radio-button>
        <el-radio-button label="service">便民服务</el-radio-button>
      </el-radio-group>

      <div class="filter-right">
        <el-select
          v-model="sortType"
          placeholder="排序方式"
          @change="handleSortChange"
        >
          <el-option label="最新发布" value="newest" />
          <el-option label="最热公告" value="hottest" />
        </el-select>
      </div>
    </div>

    <!-- 公告列表 -->
    <div class="notice-list">
      <el-card
        v-for="notice in filteredNotices"
        :key="notice.id"
        class="notice-item"
        shadow="hover"
      >
        <div class="notice-item-header">
          <el-tag :type="getNoticeTagType(notice.category)" size="small">
            {{ getNoticeCategoryName(notice.category) }}
          </el-tag>
          <span class="notice-time">{{ notice.publishTime }}</span>
        </div>

        <h3 class="notice-title" @click="showNoticeDetail(notice)">
          {{ notice.title }}
        </h3>

        <p class="notice-summary">{{ notice.summary }}</p>

        <div class="notice-item-footer">
          <div class="notice-author">
            <el-avatar :size="24" :src="notice.author.avatar" />
            <span>{{ notice.author.name }}</span>
          </div>
          <div class="notice-stats">
            <span class="view-count">
              <el-icon><View /></el-icon>
              {{ notice.viewCount }}
            </span>
            <span class="comment-count">
              <el-icon><ChatLineRound /></el-icon>
              {{ notice.commentCount }}
            </span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="notice-pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="totalNotices"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 公告详情对话框 -->
    <el-dialog
      v-model="detailVisible"
      :title="currentNotice.title"
      width="70%"
      top="5vh"
    >
      <div class="notice-detail-header">
        <el-tag :type="getNoticeTagType(currentNotice.category)" size="small">
          {{ getNoticeCategoryName(currentNotice.category) }}
        </el-tag>
        <span class="detail-time">发布时间：{{ currentNotice.publishTime }}</span>
        <span class="detail-author">发布人：{{ currentNotice.author.name }}</span>
      </div>

      <div class="notice-detail-content">
        <div v-html="currentNotice.content"></div>

        <div v-if="currentNotice.images.length > 0" class="notice-images">
          <el-image
            v-for="(img, index) in currentNotice.images"
            :key="index"
            :src="img"
            :preview-src-list="currentNotice.images"
            :initial-index="index"
            fit="cover"
            class="detail-image"
            hide-on-click-modal
          />
        </div>
      </div>

      <div class="notice-detail-footer">
        <div class="detail-stats">
          <span>浏览 {{ currentNotice.viewCount }} 次</span>
          <span>点赞 {{ currentNotice.likeCount }} 次</span>
          <span>评论 {{ currentNotice.commentCount }} 条</span>
        </div>
      </div>

      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleDownloadNotice(currentNotice)">
          <el-icon><Download /></el-icon>
          下载公告
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  Search,
  View,
  ChatLineRound,
  Download
} from '@element-plus/icons-vue'

// 静态数据 - 公告列表
const notices = ref([
  {
    id: 1,
    title: '关于春节期间社区安全管理的通知',
    category: 'notice',
    summary: '为确保春节期间社区安全，现将有关事项通知如下...',
    content: `
      <h3>关于春节期间社区安全管理的通知</h3>
      <p>尊敬的社区居民：</p>
      <p>为确保2023年春节期间社区安全，营造欢乐祥和的节日氛围，现将有关事项通知如下：</p>
      <ol>
        <li>春节期间（1月21日至1月27日）社区将加强安保力量，实行24小时值班制度；</li>
        <li>严禁在楼道、阳台等公共区域堆放易燃物品；</li>
        <li>燃放烟花爆竹请到指定区域（社区东门广场）；</li>
        <li>发现可疑人员或异常情况请及时联系物业值班室（电话：8888-1234）。</li>
      </ol>
      <p>祝全体居民新春快乐，阖家幸福！</p>
      <p style="text-align: right;">社区物业管理处</p>
      <p style="text-align: right;">2023年1月15日</p>
    `,
    publishTime: '2023-01-15 09:30:00',
    author: {
      id: 1,
      name: '物业管理处',
      avatar: 'https://example.com/avatars/property-management.png'
    },
    viewCount: 256,
    commentCount: 12,
    likeCount: 45,
    images: [
      'https://example.com/notices/spring-festival-notice.jpg',
      'https://example.com/notices/fire-safety-poster.jpg'
    ]
  },
  {
    id: 2,
    title: '2023年第一季度社区文化活动安排',
    category: 'activity',
    summary: '社区将在第一季度举办多项文化活动，欢迎居民踊跃参与...',
    content: `
      <h3>2023年第一季度社区文化活动安排</h3>
      <p>亲爱的居民朋友们：</p>
      <p>为丰富社区居民文化生活，增进邻里关系，社区将在第一季度举办以下文化活动：</p>
      <table border="1" cellspacing="0" cellpadding="5" width="100%">
        <tr>
          <th>活动名称</th>
          <th>时间</th>
          <th>地点</th>
          <th>参与方式</th>
        </tr>
        <tr>
          <td>新春联欢会</td>
          <td>1月22日 14:00-16:00</td>
          <td>社区活动中心</td>
          <td>现场参与</td>
        </tr>
        <tr>
          <td>元宵灯谜会</td>
          <td>2月5日 18:30-20:30</td>
          <td>社区广场</td>
          <td>提前报名</td>
        </tr>
        <tr>
          <td>春季健康讲座</td>
          <td>3月12日 09:30-11:30</td>
          <td>社区会议室</td>
          <td>电话预约</td>
        </tr>
      </table>
      <p>报名及咨询电话：8888-5678</p>
    `,
    publishTime: '2023-01-10 14:15:00',
    author: {
      id: 2,
      name: '社区文化站',
      avatar: 'https://example.com/avatars/culture-station.png'
    },
    viewCount: 189,
    commentCount: 8,
    likeCount: 32,
    images: [
      'https://example.com/notices/culture-activities.jpg'
    ]
  },
  {
    id: 3,
    title: '关于垃圾分类新规实施的温馨提示',
    category: 'policy',
    summary: '根据市政府最新要求，我社区将严格执行垃圾分类新标准...',
    content: `
      <h3>关于垃圾分类新规实施的温馨提示</h3>
      <p>尊敬的社区居民：</p>
      <p>根据《XX市生活垃圾分类管理条例》最新修订内容，自2023年2月1日起，我社区将严格执行以下垃圾分类标准：</p>
      <h4>一、分类标准</h4>
      <ul>
        <li><strong>可回收物</strong>：废纸、塑料、玻璃、金属等</li>
        <li><strong>有害垃圾</strong>：电池、灯管、药品、化学品等</li>
        <li><strong>厨余垃圾</strong>：剩菜剩饭、果皮菜叶等</li>
        <li><strong>其他垃圾</strong>：卫生纸、尿不湿等难以回收的废弃物</li>
      </ul>
      <h4>二、投放时间</h4>
      <p>每日上午7:00-9:00，晚上18:00-20:00</p>
      <h4>三、违规处罚</h4>
      <p>未按规定分类投放的，将面临50-200元罚款</p>
      <p>请各位居民积极配合，共同维护社区环境！</p>
    `,
    publishTime: '2023-01-05 10:00:00',
    author: {
      id: 3,
      name: '社区居委会',
      avatar: 'https://example.com/avatars/neighborhood-committee.png'
    },
    viewCount: 342,
    commentCount: 23,
    likeCount: 67,
    images: [
      'https://example.com/notices/garbage-classification.jpg',
      'https://example.com/notices/garbage-schedule.jpg'
    ]
  },
  {
    id: 4,
    title: '社区便民理发服务日安排',
    category: 'service',
    summary: '每月10日为社区便民理发服务日，60岁以上老人可享受优惠...',
    content: `
      <h3>社区便民理发服务日安排</h3>
      <p>为方便社区居民，特别是老年居民的生活需求，社区将定期开展便民理发服务：</p>
      <h4>服务时间：</h4>
      <p>每月10日 9:00-16:00（如遇节假日顺延至下一个工作日）</p>
      <h4>服务地点：</h4>
      <p>社区服务中心一楼便民服务站</p>
      <h4>服务价格：</h4>
      <ul>
        <li>普通理发：15元/次</li>
        <li>60岁以上老人：10元/次</li>
        <li>80岁以上老人：免费</li>
      </ul>
      <h4>注意事项：</h4>
      <p>1. 请携带有效身份证件（老人优惠需验证年龄）</p>
      <p>2. 建议提前预约，避免长时间等待</p>
      <p>预约电话：8888-3456</p>
    `,
    publishTime: '2023-01-03 08:45:00',
    author: {
      id: 4,
      name: '社区服务中心',
      avatar: 'https://example.com/avatars/service-center.png'
    },
    viewCount: 124,
    commentCount: 5,
    likeCount: 28,
    images: []
  },
  {
    id: 5,
    title: '社区电梯维护保养通知',
    category: 'notice',
    summary: '1月18日将进行电梯年度维护保养，期间电梯将暂停使用...',
    content: `
      <h3>社区电梯维护保养通知</h3>
      <p>尊敬的业主：</p>
      <p>为确保电梯安全运行，根据《特种设备安全法》规定，我社区将对所有电梯进行年度维护保养，具体安排如下：</p>
      <h4>维护时间：</h4>
      <p>2023年1月18日 8:00-18:00</p>
      <h4>影响范围：</h4>
      <p>1号楼、2号楼、3号楼所有电梯将轮流暂停使用</p>
      <h4>注意事项：</h4>
      <ol>
        <li>维护期间请勿使用电梯</li>
        <li>高层住户请提前规划出行时间</li>
        <li>如有紧急情况请联系物业值班室（电话：8888-1234）</li>
      </ol>
      <p>给您带来的不便，敬请谅解！</p>
    `,
    publishTime: '2023-01-12 16:20:00',
    author: {
      id: 1,
      name: '物业管理处',
      avatar: 'https://example.com/avatars/property-management.png'
    },
    viewCount: 178,
    commentCount: 7,
    likeCount: 19,
    images: [
      'https://example.com/notices/elevator-maintenance.jpg'
    ]
  }
])

// 搜索和筛选相关
const searchText = ref('')
const activeCategory = ref('all')
const sortType = ref('newest')
const currentPage = ref(1)
const pageSize = ref(10)

// 详情对话框相关
const detailVisible = ref(false)
const currentNotice = ref({})

// 计算属性 - 过滤后的公告列表
const filteredNotices = computed(() => {
  let result = notices.value
  
  // 按分类筛选
  if (activeCategory.value !== 'all') {
    result = result.filter(notice => notice.category === activeCategory.value)
  }
  
  // 搜索筛选
  if (searchText.value) {
    const keyword = searchText.value.toLowerCase()
    result = result.filter(notice => 
      notice.title.toLowerCase().includes(keyword) || 
      notice.summary.toLowerCase().includes(keyword)
    )
  }
  
  // 排序
  if (sortType.value === 'newest') {
    result.sort((a, b) => new Date(b.publishTime) - new Date(a.publishTime))
  } else {
    result.sort((a, b) => b.viewCount - a.viewCount)
  }
  
  return result
})

// 计算属性 - 总公告数
const totalNotices = computed(() => filteredNotices.value.length)

// 获取公告分类名称
const getNoticeCategoryName = (category) => {
  const map = {
    notice: '通知公告',
    activity: '社区活动',
    policy: '政策法规',
    service: '便民服务'
  }
  return map[category] || '其他'
}

// 获取公告标签类型
const getNoticeTagType = (category) => {
  const map = {
    notice: 'primary',
    activity: 'success',
    policy: 'warning',
    service: 'info'
  }
  return map[category] || ''
}

// 显示公告详情
const showNoticeDetail = (notice) => {
  currentNotice.value = notice
  detailVisible.value = true
  // 模拟增加浏览量
  notice.viewCount += 1
}

// 下载公告
const handleDownloadNotice = (notice) => {
  console.log('下载公告:', notice.title)
  ElMessage.success('公告下载功能将在实际应用中实现')
}

// 搜索相关方法
const handleSearch = () => {
  currentPage.value = 1
  console.log('搜索:', searchText.value)
}

const handleSearchClear = () => {
  currentPage.value = 1
}

// 分类改变
const handleCategoryChange = () => {
  currentPage.value = 1
}

// 排序改变
const handleSortChange = () => {
  console.log('排序方式:', sortType.value)
}

// 分页相关方法
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}
</script>

<style scoped>
.community-notice-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.notice-title {
  font-size: 28px;
  color: #333;
  margin: 0;
}

.search-bar {
  width: 400px;
}

.notice-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.filter-right {
  display: flex;
  align-items: center;
}

.notice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.notice-item {
  cursor: pointer}
</style>